<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PC</title>
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet/less" href="./css/index.less">
</head>
<body>
    <!-- h132 -->
    <div class="navbar">
        <input type="checkbox" name="ck" id="ck1">
        <div>
            <div class="wow fadeInUp" data-wow-delay=".2s">
                Spirit8
            </div>

            <div class="nav">
                <div class="wow fadeInUp" data-wow-delay=".3s">
                    <a href="#home">home</a>
                </div>
                <div class="wow fadeInUp" data-wow-delay=".4s">
                    <a href="#about">about</a>
                </div>
                <div class="wow fadeInUp" data-wow-delay=".5s">
                    <a href="#services">services</a>
                </div>
                <div class="wow fadeInUp" data-wow-delay=".6s">
                    <a href="#portfolio">portfolio</a>
                </div>
                <div class="wow fadeInUp" data-wow-delay=".7s">
                    <a href="#testimonials">testimonials</a>
                </div>
                <div class="wow fadeInUp" data-wow-delay=".8s">
                    <a href="#contact">CONTACT</a>
                </div>
            </div>
        </div>
        <!-- 小屏幕时切换菜单按钮 -->
        <label for="ck1">
            <div class="minNav wow fadeInUp" data-wow-delay=".4s">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </label>
    </div>
    <!-- home -->
    <div class="home wow fadeInUp" data-wow-delay=".1s" id="home">
        <div>
            <h1 class="wow fadeInUp" data-wow-delay=".3s">wELCOME <span>on</span> <span class="color">spirit8</span></h1>
            <p class="wow fadeInUp" data-wow-delay=".4s">We are a digital agency with years of experience and with extraordinary people</p>
        </div>
        <a href="#about" class=" wow fadeInUp" data-wow-delay=".5s">⬇</a>
    </div>
    <!-- about -->
    <div class="about" id="about">
        <img src="./image/about-background.png" class="wow fadeInUp" data-wow-delay=".2s">
        <div>
            <div class="title wow fadeInUp" data-wow-delay=".3s">
                <p>About us</p>
                <h1>Some words <span>about us</span> </h1>
                <div></div>
            </div>

            <div class="content1 wow fadeInUp" data-wow-delay=".4s">
                We love building and rebuilding brands through our  specific skills. 
                Using colour, fonts, and illustration, 
                we brand companies in a way they will never forget.
            </div>
            <div class="content2">
                <div class="wow fadeInUp" data-wow-delay=".5s">
                    <div class="li"></div>Mission-<span>We  deliver  uniqueness  and  quality</span>
                </div>
                <div class="wow fadeInUp" data-wow-delay=".5s">
                    <div class="li"></div>Mission-<span>We  deliver  uniqueness  and  quality</span>
                </div>
                <div class="wow fadeInUp" data-wow-delay=".5s">
                    <div class="li"></div>Mission-<span>We  deliver  uniqueness  and  quality</span>
                </div>
            </div>
            <div class="button wow fadeInUp" data-wow-delay=".7s">
                <img src="./image/about-btn.png">
                Browse our work
            </div>
        </div>
    </div>
    <!-- team -->
    <div class="team wow fadeInUp" data-wow-delay=".1s">
        <input type="radio" name="teamra" id="ra1" checked>
        <input type="radio" name="teamra" id="ra2">
        <input type="radio" name="teamra" id="ra3">
        <div class="title-background wow fadeInUp" data-wow-delay=".2s">
            <div>
                Meet<span> our team</span>
            </div>
            <img src="./image/title-background.png" alt="">
        </div>

        <div class="content">
            <div class="swiper wow fadeInUp" data-wow-delay=".4s">
                <div>
                    <div>
                        <div class="img">
                            <img src="./image/cover.png" alt="">
                            <div>
                                <p>Van Damme</p>
                                <P>No English</P>
                                <P>Do not seek to change what has come before. 
                                    Seek to create that which has not.
                                </P>
                            </div>
                        </div>
                        <div class="img">
                            <img src="./image/cover.png" alt="">
                            <div>
                                <p>Van Damme</p>
                                <P>No English</P>
                                <P>Do not seek to change what has come before. 
                                    Seek to create that which has not.
                                </P>
                            </div>
                        </div>
                        <div class="img">
                            <img src="./image/cover.png" alt="">
                            <div>
                                <p>Van Damme</p>
                                <P>No English</P>
                                <P>Do not seek to change what has come before. 
                                    Seek to create that which has not.
                                </P>
                            </div>
                        </div>
                        <div class="img">
                            <img src="./image/cover.png" alt="">
                            <div>
                                <p>Van Damme</p>
                                <P>No English</P>
                                <P>Do not seek to change what has come before. 
                                    Seek to create that which has not.
                                </P>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="img">
                            <img src="./image/cover.png" alt="">
                            <div>
                                <p>Van Damme</p>
                                <P>No English</P>
                                <P>Do not seek to change what has come before. 
                                    Seek to create that which has not.
                                </P>
                            </div>
                        </div>
                        <div class="img">
                            <img src="./image/cover.png" alt="">
                            <div>
                                <p>Van Damme</p>
                                <P>No English</P>
                                <P>Do not seek to change what has come before. 
                                    Seek to create that which has not.
                                </P>
                            </div>
                        </div>
                        <div class="img">
                            <img src="./image/cover.png" alt="">
                            <div>
                                <p>Van Damme</p>
                                <P>No English</P>
                                <P>Do not seek to change what has come before. 
                                    Seek to create that which has not.
                                </P>
                            </div>
                        </div>
                        <div class="img">
                            <img src="./image/cover.png" alt="">
                            <div>
                                <p>Van Damme</p>
                                <P>No English</P>
                                <P>Do not seek to change what has come before. 
                                    Seek to create that which has not.
                                </P>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="img">
                            <img src="./image/cover.png" alt="">
                            <div>
                                <p>Van Damme</p>
                                <P>No English</P>
                                <P>Do not seek to change what has come before. 
                                    Seek to create that which has not.
                                </P>
                            </div>
                        </div>
                        <div class="img">
                            <img src="./image/cover.png" alt="">
                            <div>
                                <p>Van Damme</p>
                                <P>No English</P>
                                <P>Do not seek to change what has come before. 
                                    Seek to create that which has not.
                                </P>
                            </div>
                        </div>
                        <div class="img">
                            <img src="./image/cover.png" alt="">
                            <div>
                                <p>Van Damme</p>
                                <P>No English</P>
                                <P>Do not seek to change what has come before. 
                                    Seek to create that which has not.
                                </P>
                            </div>
                        </div>
                        <div class="img">
                            <img src="./image/cover.png" alt="">
                            <div>
                                <p>Van Damme</p>
                                <P>No English</P>
                                <P>Do not seek to change what has come before. 
                                    Seek to create that which has not.
                                </P>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="team-nav">
                <label for="ra1" class="wow fadeInUp" data-wow-delay=".5s"></label>
                <label for="ra2" class=" wow fadeInUp" data-wow-delay=".6s"></label>
                <label for="ra3" class=" wow fadeInUp" data-wow-delay=".7s"></label>
            </div>
        </div>
    </div>
    <!-- services -->
    <div class="services wow fadeInUp" data-wow-delay=".1s" id="services">
        <div class="title-background wow fadeInUp" data-wow-delay=".2s">
            <div>
                take a look at <span>our services</span>
            </div>
            <img src="./image/title-background.png">
        </div>

        <div class="content1 wow fadeInUp" data-wow-delay=".3s">
            Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de 
            Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
             written in 45 BC. This book is a treatise on the theory of ethics,
             very popular during the Renaissance.
             The first line of Lorem Ipsum, 
            "Lorem ipsum dolor sit amet..", comes from a 
            line in section 1.10.32.
        </div>

        <div class="content2">
            <div class="img wow fadeInUp" data-wow-delay=".5s">
                <img src="./image/01.png" alt="">
                <div>
                    <p>Van Damme</p>
                    <P>Do not seek to change what has come before. 
                        Seek to create that which has not.
                    </P>
                </div>
            </div>
            <div class="img wow fadeInUp" data-wow-delay=".6s">
                <img src="./image/02.png" alt="">
                <div>
                    <p>Van Damme</p>
                    <P>Do not seek to change what has come before. 
                        Seek to create that which has not.
                    </P>
                </div>
            </div>
            <div class="img wow fadeInUp" data-wow-delay=".7s">
                <img src="./image/03.png" alt="">
                <div>
                    <p>Van Damme</p>
                    <P>Do not seek to change what has come before. 
                        Seek to create that which has not.
                    </P>
                </div>
            </div>
            <div class="img wow fadeInUp" data-wow-delay=".8s">
                <img src="./image/04.png" alt="">
                <div>
                    <p>Van Damme</p>
                    <P>Do not seek to change what has come before. 
                        Seek to create that which has not.
                    </P>
                </div>
            </div>
        </div>
    </div>
    <!-- testimonials -->
    <div class="clients wow fadeInUp" data-wow-delay=".1s">
        <input type="radio" name="clientsra" id="clients-ra1" checked>
        <input type="radio" name="clientsra" id="clients-ra2">
        <input type="radio" name="clientsra" id="clients-ra3">
        <div class="title-background wow fadeInUp" data-wow-delay=".2s">
            <div>SOME OF <span>OUR CLIENTS</span></div>
            <img src="./image/title-background.png">
        </div>
        <div class="content wow fadeInUp" data-wow-delay=".4s">
            <div>
                <div>
                    <img src="./image/Layer 64.png">
                    <img src="./image/Layer 65.png">
                    <img src="./image/Layer 67.png">
                    <img src="./image/Layer 68.png">
                    <img src="./image/Layer 69.png">
                </div>

                <div>
                    <img src="./image/Layer 64.png">
                    <img src="./image/Layer 65.png">
                    <img src="./image/Layer 67.png">
                    <img src="./image/Layer 68.png">
                    <img src="./image/Layer 69.png">
                </div>

                <div>
                    <img src="./image/Layer 64.png">
                    <img src="./image/Layer 65.png">
                    <img src="./image/Layer 67.png">
                    <img src="./image/Layer 68.png">
                    <img src="./image/Layer 69.png">
                </div>
            </div>
        </div>
        <div class="clients-nav">
            <label for="clients-ra1" class=" wow fadeInUp" data-wow-delay=".5s"></label>
            <label for="clients-ra2" class=" wow fadeInUp" data-wow-delay=".6s"></label>
            <label for="clients-ra3" class=" wow fadeInUp" data-wow-delay=".7s"></label>
        </div>
    </div>
    <!-- portfolio -->
    <div class="portfolio wow fadeInUp" data-wow-delay=".1s" id="portfolio">
        <div class="title-background wow fadeInUp" data-wow-delay=".2s">
            <div>
                take a look at <span>our work</span>
            </div>
            <img src="./image/title-background.png">
        </div>

        <div class="content1 wow fadeInUp" data-wow-delay=".4s">
            Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de 
            Finibus Bonorum et Malorum" 
            (The Extremes of Good and Evil) by Cicero, 
            written in 45 BC. 
            This book is a treatise on the theory of ethics, 
            very popular during the Renaissance. 
            The first line of Lorem Ipsum, 
            "Lorem ipsum dolor sit amet..",
             comes from a line in section 1.10.32.
        </div>

        <div class="content2">
            <div class="portfolio-nav">
                <div class=" wow fadeInUp" data-wow-delay=".5s">Filter by type</div>
                <div class=" wow fadeInUp" data-wow-delay=".6s">
                    <div>All</div>
                    <div>Web design</div>
                    <div>Mobile design</div>
                    <div>Mobile design</div>
                </div>
                <div class=" wow fadeInUp" data-wow-delay=".6s">
                    <select name="select" id="select">
                        <option value="1">all</option>
                        <option value="2">Web design</option>
                        <option value="3">Mobile design</option>
                        <option value="4">Mobile design</option>
                    </select>
                </div>
            </div>

            <div class="image">
                <div class="row wow fadeInLeft" data-wow-delay=".8s">
                    <div class="img">
                        <img src="./image/work-img.png" alt="">
                        <div class="hover">
                            <div>Trend and fashion</div>
                            <div>Website design</div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                    <div class="img">
                        <img src="./image/work-img.png" alt="">
                        <div class="hover">
                            <div>Trend and fashion</div>
                            <div>Website design</div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                    <div class="img">
                        <img src="./image/work-img.png" alt="">
                        <div class="hover">
                            <div>Trend and fashion</div>
                            <div>Website design</div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                    <div class="img">
                        <img src="./image/work-img.png" alt="">
                        <div class="hover">
                            <div>Trend and fashion</div>
                            <div>Website design</div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row wow fadeInLeft" data-wow-delay=".9s">
                    <div class="img">
                        <img src="./image/work-img2.png" alt="">
                        <div class="hover">
                            <div>Trend and fashion</div>
                            <div>Website design</div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                    <div class="img">
                        <img src="./image/work-img2.png" alt="">
                        <div class="hover">
                            <div>Trend and fashion</div>
                            <div>Website design</div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                    <div class="img">
                        <img src="./image/work-img2.png" alt="">
                        <div class="hover">
                            <div>Trend and fashion</div>
                            <div>Website design</div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                    <div class="img">
                        <img src="./image/work-img2.png" alt="">
                        <div class="hover">
                            <div>Trend and fashion</div>
                            <div>Website design</div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row  wow fadeInLeft" data-wow-delay=".10s">
                    <div class="img">
                        <img src="./image/work-img3.png" alt="">
                        <div class="hover">
                            <div>Trend and fashion</div>
                            <div>Website design</div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                    <div class="img">
                        <img src="./image/work-img3.png" alt="">
                        <div class="hover">
                            <div>Trend and fashion</div>
                            <div>Website design</div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                    <div class="img">
                        <img src="./image/work-img3.png" alt="">
                        <div class="hover">
                            <div>Trend and fashion</div>
                            <div>Website design</div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                    <div class="img">
                        <img src="./image/work-img3.png" alt="">
                        <div class="hover">
                            <div>Trend and fashion</div>
                            <div>Website design</div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- testimonials -->
    <div class="testimonials wow fadeInUp" data-wow-delay=".1s" id="testimonials">
        <input type="radio" name="testimonialsra" id="testimonials-ra1" checked>
        <input type="radio" name="testimonialsra" id="testimonials-ra2">
        <input type="radio" name="testimonialsra" id="testimonials-ra3">
        <div class="title-background wow fadeInUp" data-wow-delay=".2s">
            <div>SOME OF <span>OUR CLIENTS</span></div>
            <img src="./image/title-background.png">
        </div>
        <div class="content">
            <div class=" wow fadeInUp" data-wow-delay=".4s">
                <!-- 三个轮播 -->
                <div>
                    <div>This book is a treatise on the theory of ethics,
                         very popular during the Renaissance. 
                         The first line of Lorem Ipsum, 
                         "Lorem ipsum dolor sit amet..", 
                         comes from a line in section 1.10.32.</div>
                    <div>Dean Martin, CEO Acme Inc.</div>
                </div>

                <div>
                    <div>This book is a treatise on the theory of ethics,
                         very popular during the Renaissance. 
                         The first line of Lorem Ipsum, 
                         "Lorem ipsum dolor sit amet..", 
                         comes from a line in section 1.10.32.</div>
                    <div>Dean Martin, CEO Acme Inc.</div>
                </div>

                <div>
                    <div>This book is a treatise on the theory of ethics,
                         very popular during the Renaissance. 
                         The first line of Lorem Ipsum, 
                         "Lorem ipsum dolor sit amet..", 
                         comes from a line in section 1.10.32.</div>
                    <div>Dean Martin, CEO Acme Inc.</div>
                </div>
            </div>
        </div>
        <div class="clients-nav">
            <label for="testimonials-ra1" class=" wow fadeInUp" data-wow-delay=".5s"></label>
            <label for="testimonials-ra2" class=" wow fadeInUp" data-wow-delay=".6s"></label>
            <label for="testimonials-ra3" class=" wow fadeInUp" data-wow-delay=".7s"></label>
        </div>
    </div>
    <!-- contact  -->
    <div class="contact wow fadeInUp" data-wow-delay=".1s" id="contact">
        <div class="title title-background wow fadeInUp" data-wow-delay=".2s">
            <div>feel free to <span>contact us</span></div>
            <img src="./image/title-background.png" alt="" srcset="">
        </div>
        <div class="content wow fadeInUp" data-wow-delay=".4s">
            <p>
            Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
            Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written
            in 45 BC. This book is a treatise on the theory of ethics, very
            popular during the Renaissance.
            </p>
        </div>
        <div class="push wow fadeInUp" data-wow-delay=".5s">
            <from name="push">
                <div class="top">
                    <div class="one">
                        <div class="font wow fadeInLeft" data-wow-delay=".6s">
                                <p>Name<span>*</span></p>
                            </div>
                            <div class="inp">
                                <input type="text" class=" wow fadeInLeft" data-wow-delay=".6s"/>
                            </div>
                        </div>
                        <div class="one">
                            <div class="font wow fadeInRight" data-wow-delay=".6s">
                                <p>Email address <span>*</span></p>
                            </div>
                            <div class="inp">
                                <input type="text" class=" wow fadeInRight" data-wow-delay=".6s"/>
                        </div>
                    </div>
                </div>

                <div class="bottom wow fadeInUp" data-wow-delay=".6s">
                    <div class="font">
                        <p>Message<span>*</span></p>
                    </div>
                    <div class="tex">
                        <textarea></textarea>
                    </div>
                </div>
                <div class="but">
                    <button>send</button>
                </div>
            </from>
        </div>
    </div>
    <!-- foot  -->
    <div class="foot wow fadeInUp" data-wow-delay=".1s" id="foot">
        <div class="left wow fadeInLeft" data-wow-delay=".3s">
            ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span>
        </div>
        <div class="right wow fadeInRight" data-wow-delay=".3s">
            <div class="image">
            <img src="./image/footer1.png" />
            </div>
            <div class="image">
            <img src="./image/footer2.png" />
            </div>
            <div class="image">
            <img src="./image/footer3.png" />
            </div>
            <div class="image">
            <img src="./image/footer4.png" />
            </div>
            <div class="image">
            <img src="./image/footer5.png" />
            </div>
        </div>
    </div>

    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/less.min.js"></script>
    <script src="./assets/js/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>
</body>
</html>